<template>
    <div
        style="padding: 50px; box-sizing: border-box;height: 1000px;display: flex;flex-direction: column;justify-content: space-evenly;">
        <el-steps :active=active align-center >
            <el-step title="待确认"  />
            <el-step title="已支付"  />
            <el-step title="已完成"  />
            <el-step title="已关闭"  />
        </el-steps>
        <span>基本信息</span>
        <el-table :data="basicdate" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="orderId" label="订单编号" />
            <el-table-column prop="roomType" label="房型" />
            <el-table-column prop="roomId" label="房号" />
            <el-table-column prop="checkTime" label="入住时间" />
            <el-table-column prop="leaveTime" label="离开时间" />
            <el-table-column prop="payable" label="订单金额" />
            <el-table-column prop="addIntegral" label="订单可得积分" />
        </el-table>

        <span>入住人信息</span>
        <el-table :data="userdate" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="id" label="用户信息" width="100" />
            <el-table-column prop="name" label="入住人姓名" />
            <el-table-column prop="phone" label="手机号码" />
            <el-table-column prop="nickname" label="备注" width="120" />
        </el-table>

        <span>费用信息</span>
        <el-table :data="costdate" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="shoudpay" label="实际付款" width="100" />
            <el-table-column prop="payable" label="订单金额" />
            <el-table-column prop="couponMoney" label="优惠券" />
            <el-table-column prop="integral" label="积分抵扣" />
            <el-table-column prop="balance" label="余额抵扣" width="120" />
        </el-table>

        <span>操作信息</span>
        <el-table :data="operatedate" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column prop="userId" label="操作者" width="100" />
            <el-table-column prop="editorTime" label="操作时间" />
            <el-table-column prop="payState" label="订单状态" />
            <el-table-column prop="notes" label="备注" width="120" />
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '../stores/kfdd/ksdd'
const store = useCounterStore()
const basicdate: any = ref([])
const userdate: any = ref([])
const costdate: any = ref([])
const active=ref(0)
const operatedate: any = ref([{ userId: '用户', editorTime: '2023/7/18', payState: '已完成', notes: '确认入住' }])
function zhuan(){
    if(store.state === '待确认'){
        active.value=1
    }else if(store.state === '已支付'){
        active.value=2
    }else if(store.state === '已完成'){
        active.value=3
    }else{
        active.value=4
    }
    console.log(active.value);
    
}
onMounted(() => {
    
    basicdate.value[0] = store.orderRoomShipVo
    userdate.value[0] = store.orderRoomUserVo
    costdate.value[0] = store.orderRoomCostVo
    operatedate.value = store.orderEditorList
    console.log(basicdate.value[0]);
    zhuan()
})
</script>